<template>
  <div class="clientItem-container">
    <div class="item-title">详情</div>
    <div v-if="client != {}">
      <div class="input-suffix">
        <span>名称：</span>
        <el-input class="input-content" v-model="client.name"> </el-input>
      </div>
      <div class="input-suffix">
        <span>访问地址：</span>
        <el-input class="input-content" v-model="client.url"> </el-input>
      </div>
      <div class="operate-container">
        <el-button @click="back()">返回</el-button>
        <el-button
          v-if="type == 'edit' || type == 'add'"
          type="success"
          @click="save()"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Input, Message } from "element-ui";
import { GetClient, UpdateClient, AddClient } from "../api/Client";

export default {
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
  },
  data() {
    return {
      id: "",
      type: "",
      client: {},
      content: "",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    save() {
      if (this.type == "add") {
        AddClient(this.client).then((result) => {
          if (result.code == "200") {
            Message({ message: "添加成功", type: "success" });

            setTimeout(() => {
              this.client = result.Client;
              this.back();
            }, 500);
          }
        });
      } else if (this.type == "edit") {
        UpdateClient(this.client).then((result) => {
          if (result.code == "200") {
            Message({ message: "修改成功", type: "success" });
            setTimeout(() => {
              this.client = result.client;
              this.back();
            }, 500);
          }
        });
      }
    },
    init() {
      let { id, type } = this.$route.params;
      this.id = id;
      this.type = type;
      var _this = this;
      if (type != "add") {
        GetClient(id).then((result) => {
          _this.client = result.data;
        });
      }
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped>
.input-content {
  width: 50rem !important;
  margin-top: 20px;
}
.input-suffix > span {
  width: 5rem;
  display: inline-block;
}
.operate-container {
  text-align: center;
  margin-top: 100px;
}
.item-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.clientItem-container {
  padding: 20px;
}
</style>
